<template>
	<div>
		<!-- 把最大数量绑定为库存数 -->
		<div class="mui-numbox" data-numbox-min='1' :data-numbox-max='max'>
			<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
			<input id="test" class="mui-input-numbox" type="number" value="1" 
			ref="number" @change="changenumber"/>
			<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
		</div>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.js'
	export default{
		
		mounted(){
			// 初始化数字选择框组件
			mui('.mui-numbox').numbox()
		},
		methods:{
			changenumber(){
				// 使用emit把子组件的方法传递给父组件
				this.$emit('getcount',parseInt(this.$refs.number.value))
			}
		},
		// 接收父组件传递过来的库存数
		props:['max'],
		watch:{
			// 监听父组件传递的max值
			max:function(newAvl,oldAvl){
				//无论max值变化多少次， max值都取新值
				mui('.mui-numbox').numbox().setOption("max",newAvl)
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>
